<!-- 高级检索 专利用 -->
<template>
  <ul class="search-area">
    <vue-scroll :ops="scrollOps">
      <!--Keyword-->
      <li>
        <el-form
          :model="firstRow"
          class="elform"
        >
          <span class="tit">检索条件</span>
          <div class="form-item-box">
            <div class="item-box">
              <el-select v-model="firstRowtitleValue" class="elselect">
                <el-option
                  v-for="item in firstRow.titles"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="item-box">
              <!-- 提示信息 -->
              <el-popover
                placement="top"
                trigger="focus"
                width="384"
                popper-class="rowsPopover"
              >
                <div>
                  <p class="rowsPopover-p">
                    {{ $t("adv.input-1.title-1") }}<br />
                    {{ $t("adv.input-1.title-2") }}
                  </p>
                  <p>{{ $t("adv.input-1.title-3") }}</p>
                  <p>{{ $t("adv.input-1.title-4") }}</p>
                  <p>{{ $t("adv.input-1.title-5") }}</p>
                  <p>{{ $t("adv.input-1.title-6") }}</p>
                  <p>{{ $t("adv.input-1.title-7") }}</p>
                </div>
                <el-input
                  v-model="firstRow.input"
                  slot="reference"
                  @keydown.native="rowsPopoverHide()"
                >
                </el-input>
              </el-popover>
              <div class="color-box">
                <el-color-picker
                  v-model="firstRow.color"
                  class="colorPicker"
                  :predefine="predefineColors"
                ></el-color-picker>
              </div>
            </div>
            <div class="tools-box">
              <svg class="icon" aria-hidden="true" @click="addRow('Keyword')">
                <use xlink:href="#icon-tianjia"></use>
              </svg>
            </div>
          </div>
        </el-form>
      </li>
      <li>
        <el-form
          :model="secondRow[index]"
          class="elform"
          v-for="(item, index) in secondRow"
          :key="index"
        >
          <span class="tit"></span>
          <div class="form-item-box">
            <div class="item-box">
              <el-select class="elselect2 way" v-model="item.secondRoworValue">
                <el-option
                  v-for="ite in item.way"
                  :key="ite.value"
                  :label="ite.label"
                  :value="ite.value"
                >
                </el-option>
              </el-select>
              <el-select class="elselect2" v-model="item.secondRowtitleValue">
                <el-option
                  v-for="ite in item.titles"
                  :key="ite.value"
                  :label="ite.label"
                  :value="ite.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="item-box">
              <!-- 提示信息 -->
              <el-popover
                placement="top"
                width="384"
                trigger="focus"
                popper-class="rowsPopover"
              >
                <div>
                  <p class="rowsPopover-p">
                    {{ $t("adv.input-1.title-1") }}<br />
                    {{ $t("adv.input-1.title-2") }}
                  </p>
                  <p>{{ $t("adv.input-1.title-3") }}</p>
                  <p>{{ $t("adv.input-1.title-4") }}</p>
                  <p>{{ $t("adv.input-1.title-5") }}</p>
                  <p>{{ $t("adv.input-1.title-6") }}</p>
                  <p>{{ $t("adv.input-1.title-7") }}</p>
                </div>
                <el-input
                  v-model="secondRow[index].input"
                  slot="reference"
                  @keydown.native="rowsPopoverHide()"
                >
                </el-input>
              </el-popover>
              <div class="color-box">
                <el-color-picker
                  v-model="secondRow[index].color"
                  class="colorPicker"
                  :predefine="predefineColors"
                ></el-color-picker>
              </div>
            </div>
            <div class="tools-box">
              <svg
                class="icon"
                aria-hidden="true"
                @click="delRow(index, 'Keyword')"
              >
                <use xlink:href="#icon-jianqu"></use>
              </svg>
            </div>
          </div>
        </el-form>
      </li>
      <!--Date-->
      <li>
        <el-form
          :model="eighthRow"
          class="elform"
        >
          <span class="tit">检索时间</span>
          <div class="form-item-box2">
            <div class="display-box">
              <div class="item-box" v-if="eighthRowdateTypeVal != '4'">
                <el-date-picker
                  @change="IsDate"
                  v-model="eighthRow.startTime"
                  type="date"
                >
                </el-date-picker>
                <i class="iconfont icon-riqi"></i>
              </div>
              <div class="item-box date-to-box" v-if="eighthRowdateTypeVal == '1'">
                <span class="date-to" >to</span>
              </div>
              <div class="item-box" v-if="eighthRowdateTypeVal == '1'">
                <el-date-picker
                  @change="IsDate"
                  v-model="eighthRow.endTime"
                  type="date"
                  class="elpicker"
                >
                </el-date-picker>
                <i class="iconfont icon-riqi"></i>
              </div>
              <div class="item-box" v-if="eighthRowdateTypeVal == '4'">
                <el-date-picker
                  v-model="eighthRow.startTime"
                  type="year"
                  placeholder=""
                  class="elpicker"
                >
                </el-date-picker>
                <i class="iconfont icon-riqi"></i>
              </div>
              <div class="tools-box"></div>
            </div>
          </div>
        </el-form>
      </li>
    </vue-scroll>
    <li class="btn-box">
      <el-button @click="search" v-if="isTechObj && isTechObj.isTech" class="analysisBtn fl btn">进入分析</el-button>
      <el-button @click="clearAll" class="clearBtn fl btn">清除</el-button>
      <el-button v-if="!isTechObj" @click="search" class="searchBtn fr btn">检索</el-button>
    </li>
  </ul>
</template>

<script >
import Ecolors from "@/utils/chartColors.js";
import {andORFiledZL,andORFiledWX,andORFiledCG,andORFiledXM,andORFiledBZ} from './advancedSearch.js'
export default {
  components: {},
  props:{
    isTechObj:{
      type:Object,
    },
    ctNavID:{
      type:String
    }
  },
  watch: {
    '$route'() {
      //处理and 与 OR 字段
      this.handleAndOrFiled()
      this.clearAll();
      this.mTechObj = this.isTechObj
    },
  },
  data() {
    return {
      mTechObj:{},
      globalSQ:'',
      predefineColors: Ecolors.color.slice(0, 10),
      searchInput: "",
      checkedAll: false,
      isCheckedAll: false,
      titles: [],  
      way: [
        {
          //与或关系
          value: "OR",
          label: "OR",
        },
        {
          value: "AND",
          label: "AND",
        },
      ],
      //时间段分类
      Customized: [], //自定义分类
      firstRowtitleValue: "",
      firstRow: {
        titles: [],          
        input: "",
        color: Ecolors.color[0],
      },
      secondRow: [
        {
          secondRoworValue: "AND",
          secondRowtitleValue: "title=",
          input: "",
          way: [],
          titles: [],
          color: Ecolors.color[0],
        },
      ],
      eighthRowapplyDateVal: "",
      eighthRowdateTypeVal: "1",
      eighthRow: {
        startTime: "",
        endTime: "",
      },
      searchMode: {
        input: "",
      },
      noResult: true,
      pageSize: 5,
      totalRow: 1,
      page: [
        {
          value: 5,
          label: "5",
        },
        {
          value: 10,
          label: "10",
        },
        {
          value: 20,
          label: "20",
        },
        {
          value: 50,
          label: "50",
        },
        {
          value: 100,
          label: "100",
        },
      ],
      currentPage: 1, //当前页数
      textarea: "",
      historyTable: false,
      toolVisible: false,
      categoryTabs: "AP",
      searchInput: "",

      selecedtData: [],
      currNode: [],
      scrollOps: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'number',
          detectResize: true,
          wheelScrollDuration: 200
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
          speed: 1000,
          // easing: 'easeInQuad',
          maxHeight: 360
        },
        rail: {
          size: '6px',
          gutterOfEnds: '10px',
          gutterOfSide: '0px',
          keepShow: true,
        },
        bar: {
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: '#adc2ca',
          size: '6px'
        },
      },
    };
  },
  mounted () {
    //处理and 与 OR 字段
    this.handleAndOrFiled()
    this.init();
    this.clearAll();
    
  },
  methods: {
    init() {
      this.mTechObj = this.isTechObj
      $("body").on("click", ".colorPicker", function () {
        setTimeout(() => {
          $(".rowsPopover").hide();
        }, 50);
        return false;
      });
      
    },
    //处理and 与 OR 字段
    handleAndOrFiled(){
      switch(this.ctNavID){
        case 'patent':
          this.firstRow.titles = andORFiledZL
          break;
        case 'paper':
          this.firstRow.titles = andORFiledWX;
          break;
        case 'achieve':
          this.firstRow.titles = andORFiledCG;
          break;
        case 'project':
          this.firstRow.titles = andORFiledXM;
          break;
        case 'standard':
          this.firstRow.titles = andORFiledBZ;
          break;
      }
      this.firstRowtitleValue = this.firstRow.titles[0]?.value
    },

    /*
     * params: 无
     * return: 无
     * function: 隐藏input提示框
     * */
    rowsPopoverHide() {
      $(".rowsPopover").hide();
    },
    /*
     * params: 无
     * return: 无
     * function: 补零
     * */
    Appendzero(obj) {
      if (obj < 10) return "0" + "" + obj;
      else return obj;
    },
    /*
     * params: 无
     * return: 无
     * function: 判断时间是否合规
     * */
    IsDate() {
      let a = this.eighthRow.startTime,
        b = this.eighthRow.endTime;
      if (a && b && a > b) {
        this.$message({
          message:"开始时间不能大于结束时间！",
          duration: 1500,
          center: true,
        });
        this.eighthRow.startTime = this.eighthRow.endTime = "";
      } else if (b > new Date()) {
        this.$message({
          message:"结束时间不能大于当前时间！",
          duration: 1500,
          center: true,
        });
        this.eighthRow.endTime = "";
      } else if (a > new Date()) {
        this.$message({
          message:"开始时间不能大于当前时间！",
          duration: 1500,
          center: true,
        });
        this.eighthRow.startTime = "";
      }
    },
    /*
     * params: 添加行的类型
     * return: 无
     * function: 添加行
     * */
    addRow(type) {
      var newRow = {};
      if (type === "Keyword") {
        newRow["input"] = "";
        newRow["way"] = this.way;
        newRow["titles"] = this.firstRow.titles;
        this.$set(newRow, "secondRoworValue", "AND");
        this.$set(newRow, "secondRowtitleValue", "");
        newRow["color"] = Ecolors.color[0];
        this.secondRow.push(newRow);
      } 
    },
    /*
     * params: 删除行的类型与索引
     * return: 无
     * function: 删除行
     * */
    delRow(index, type) {
      if (type === "Keyword") {
        this.secondRow.splice(index, 1);
      } 
    },
    /*
     * params: 无
     * return: 无
     * function: 查询
     * */
    search() {
      var all = "",
        one = "",//关键词key 与two拼接为检索式
        two = "",//关键词value
        twoinput = [],
        twovalue = [],
        twoorvalue = [],
        eight = "";
      if (this.firstRow.input) {
        // if (
        //   this.firstRow.input.toLowerCase().indexOf(" AND ") > -1 ||
        //   this.firstRow.input.toLowerCase().indexOf(" OR ") > -1 ||
        //   this.firstRow.input.toLowerCase().indexOf(" andnot ") > -1
        // ) {
        //   one = this.firstRowtitleValue + "(" + this.firstRow.input + ")";
        // } else {
        //   one = this.firstRowtitleValue + this.firstRow.input;
        // }
        if (this.firstRowtitleValue.indexOf("=")>-1) {
          one = this.firstRowtitleValue + this.firstRow.input;
        } else {
          one = this.firstRowtitleValue + "(" + this.firstRow.input + ")";
        }
      }

      for (let i = 0; i < this.secondRow.length; i++) {
        if (this.secondRow[i].input && one) {
          if (
            this.secondRow[i].input.toLowerCase().indexOf(" AND ") > -1 ||
            this.secondRow[i].input.toLowerCase().indexOf(" OR ") > -1 ||
            this.secondRow[i].input.toLowerCase().indexOf(" andnot ") > -1
          ) {
            two +=
            " " +
            this.secondRow[i].secondRoworValue +
            " " +
            this.secondRow[i].secondRowtitleValue +
            "(" +
            this.secondRow[i].input +
            ")";
          } else {
            two +=
            " " +
            this.secondRow[i].secondRoworValue +
            " " +
            this.secondRow[i].secondRowtitleValue +
            this.secondRow[i].input;
          }
          
        } else if (this.secondRow[i].input && !one) {
          twoinput.push(this.secondRow[i].input);
          twovalue.push(this.secondRow[i].secondRowtitleValue);
          twoorvalue.push(this.secondRow[i].secondRoworValue);
        }
      }
      if (!one && twoinput) {
        twoorvalue[0] = "";
        for (var i = 0; i < twoinput.length; i++) {
          if (twovalue[i] == "(TTL/xxx OR ABST/ yyy)") {
            if (
              twoinput[i].toLowerCase().indexOf(" AND ") > -1 ||
              twoinput[i].toLowerCase().indexOf(" OR ") > -1 ||
              twoinput[i].toLowerCase().indexOf(" andnot ") > -1
            ) {
              two +=
                twoorvalue[i] +
                " " +
                "(TTL/(" +
                twoinput[i] +
                ") OR ABST/(" +
                twoinput[i] +
                "))" +
                " ";
            } else {
              two +=
                twoorvalue[i] +
                " " +
                "(TTL/" +
                twoinput[i] +
                " OR ABST/" +
                twoinput[i] +
                ")" +
                " ";
            }
          } else {
            if (
              twoinput[i].toLowerCase().indexOf(" AND ") > -1 ||
              twoinput[i].toLowerCase().indexOf(" OR ") > -1 ||
              twoinput[i].toLowerCase().indexOf(" andnot ") > -1
            ) {
              two +=
                twoorvalue[i] + " " + twovalue[i] + "(" + twoinput[i] + ") ";
            } else {
              two += twoorvalue[i] + " " + twovalue[i] + twoinput[i] + " ";
            }
          }
        }
      }
      //处理时间
      if ( this.eighthRow.startTime && (one || two ) ) {
        if (this.eighthRowdateTypeVal == "1" && this.eighthRow.endTime) {
          eight =
            "publish_date >= " +
            this.eighthRow.startTime.getFullYear() +'-'+
            this.Appendzero(this.eighthRow.startTime.getMonth() + 1) +'-'+
            this.Appendzero(this.eighthRow.startTime.getDate()) +
            " AND publish_date <= " +
            this.eighthRow.endTime.getFullYear() +'-'+
            this.Appendzero(this.eighthRow.endTime.getMonth() + 1) +'-'+
            this.Appendzero(this.eighthRow.endTime.getDate());
        } else {
          this.$message({
            message:"开始日期及结束日期不能为空",
            duration: 1500,
            center: true,
          });
        }
      } else if (this.eighthRow.startTime && !one && !two ) {
        if (this.eighthRowdateTypeVal == "1" && this.eighthRow.endTime) {
          eight =
            "publish_date >= " +
            this.eighthRowapplyDateVal +
            this.eighthRow.startTime.getFullYear() +'-'+
            this.Appendzero(this.eighthRow.startTime.getMonth() + 1) +'-'+
            this.Appendzero(this.eighthRow.startTime.getDate()) +
            " AND publish_date <= " +
            this.eighthRow.endTime.getFullYear() +'-'+
            this.Appendzero(this.eighthRow.endTime.getMonth() + 1) +'-'+
            this.Appendzero(this.eighthRow.endTime.getDate());
        }  else {
          this.$message({
            message:"开始日期及结束日期不能为空",
            duration: 1500,
            center: true,
          });
        }
      }

      //汇总高级检索式 
      all =
        one +
        " " +
        two +
        " " +
        eight;
      if (all.trim() == "") {
        this.$message({
          message:"请输入检索式",
          duration: 1500,
          center: true,
        });
      } else {
        let sq = all
        .replace(/^\s*/g, "")
        .replace(/\s*$/g, "")
        .replace(/\s{2,}/g, " ");
        // 技术分析业务时执行
        if(this.isTechObj){
          this.globalSQ = sq
          this.toAnalysis()
          return;
        }
        //触发查询接口 存储高级检索式
        this.$store.commit("setAdvancedSearchWord", sq);
        let keywords = [JSON.parse(JSON.stringify(this.firstRow)), ...JSON.parse(JSON.stringify(this.secondRow))]
        let highlightKeyWords = []
        keywords.forEach(v => {
          highlightKeyWords.push({
            words: v.input.trim(),
            color: v.color
          })
        })
        this.$store.commit("setHighlightKeyWords", {
          modes: highlightKeyWords,
          open: true
        })
      }
    },
    /*
     * params: 无
     * return: 无
     * function: 清空输入内容
     * */
    clearAll() {
      this.firstRow.input = "";
      this.firstRow.titleValue = "";
      this.secondRow = [];
      this.eighthRow = {
        applyDate: this.applyDate,
        applyDateVal: "",
        dateTypeVal: "",
        startTime: "",
        endTime: "",
      };
    },
    /*
     * params: 无
     * return: 无
     * function: 生成检索式
     * */
    getMode() {},

    //跳转至技术分析界面 技术分析功能特有业务
    toAnalysis(){
      if(this.globalSQ == ''){
        this.$message({
          message:"请先进行检索，然后根据结果进行分析",
          duration: 1500,
          center: true,
        });
        return
      }
      this.$store.commit("setTechAnalysisKeyWords", this.globalSQ);
      let routerUrl = this.$router.resolve({
        name: this.isTechObj.routerName,
        query: {
          type:this.isTechObj.type,
          apiName:this.isTechObj.apiName,
        }
      })
      window.open(routerUrl.href,'_blank');
    }

  },
};
</script>

<style lang="scss">
.search-area {
  position: relative;
  width: 100%;
  padding: 20px 10px 10px 20px !important;
  border: 2px solid $mainColor !important;
  border-radius: 8px;
  margin-top: 6px !important;
  box-sizing: border-box;
  background-color: #fff;
  li {
    position: relative;
    &.btn-box {
      // position: absolute;
      // left: 0;
      // bottom: 0;
      display: flex;
      justify-content: flex-end;
      margin: 10px 50px;
      // align-items: center;
      // justify-content: space-between;
      // padding: 8px 37px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-sizing: border-box;
      background-color: $color2;
      .btn {
        border-radius: 30px;
        font-size: 14px;
        padding: 8px 37px;

        font-weight: bold;
        &.analysisBtn {
          color: $mainColor;
          background-color: $color2;
        }
        &.clearBtn {
          color: $mainColor;
          background-color: $color149;
        }
        &.searchBtn {
          border-color: transparent;
          color: $color2;
          background-color: $mainColor;
        }
      }
    }
    .elform {
      position: relative;
      display: flex;
      align-items: baseline;
      width: 100%;
      margin-bottom: 16px;
      .tit {
        display: inline-flex;
        align-items: center;
        width: 80px;
        text-align: left;
        font-weight: bold;
        font-size: 12px;
        color: $color6;
      }
      .form-item-box, .form-item-box2 {
        position: relative;
        display: flex;
        width: 100%;
        .item-box {
          position: relative;
          flex: 1;
          display: inline-flex;
          margin-right: 10px;
          font-size: initial;
          &.date-to-box {
            flex: none;
            width: 30px;
          }
          > span {
            width: 100%;
          }
          .elselect {
            width: 100%;
          }
          .elselect2 {
            flex: 1;
            &.way {
              flex: initial;
              width: 72px;
              margin-right: 10px;
            }
          }
          .el-date-editor {
            width: 100%;
          }
          .icon-riqi {
            position: absolute;
            top: 0;
            right: 10px;
            line-height: 40px;
            font-size: 24px;
            color: $color50;
          }
          .color-box {
            position: absolute;
            top: 0;
            right: 20px;
            .el-color-picker {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .el-color-picker__trigger {
              width: 15px;
              height: 15px;
              padding: 0;
              border-color: transparent;
            }
            .el-color-picker__icon {
              display: none;
            }
            .el-color-picker__color {
              border: none;
            }
            .el-input__suffix {
              right: 20px;
            }
          }
          .date-to {
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            color: $color6;
          }
        }
        .item-box:first-of-type {
          flex: none;
          width: 200px;
        }
        .tools-box {
          position: relative;
          width: 30px;
          line-height: 40px;
          margin-right: 10px;
          text-align: center;
          font-size: initial;
          .icon {
            transform: scale(1.2);
          }
        }
        .el-input__inner {
          font-size: 12px;
        }
      }
      .form-item-box2 {
        flex-wrap: wrap;
        .display-box {
          position: relative;
          display: inline-flex;
          width: 100%;
          margin-bottom: 16px;
          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.el-select-dropdown__item {
  &.selected {
    color: $mainColor !important;
  }
}

.icon {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  fill: currentColor;
  overflow: hidden;
}

.rowsPopover {
  .rowsPopover-p {
    font-weight: bold;
    color: $color143;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid $color58;
  }
  p {
    margin: 5px 0;
    font-size: 12px;
  }
}
</style>
